<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>

<head lang="en">
<%@ include file="../commoms/link.txt"%>
  <link rel="stylesheet" href="assets/css/jquery.motionCaptcha.0.2.css">
<script src="assets/js/jquery.motionCaptcha.0.2.js"></script>
<meta name="description" content="register">
<style type="text/css">
.header {
	text-align: center;
}

.header h1 {
	font-size: 200%;
	color: #333;
	margin-top: 30px;
}

.header p {
	font-size: 14px;
}

.get {
	text-align: center;
	padding: 100px 0;
}
</style>
</head>

<body>
	<header class="am-topbar am-topbar-fixed-top">
		<div class="am-container">
			<h1 class="am-topbar-brand">
				<a href="index.html">阿拉丁</a>
			</h1>
		</div>
	</header>
	<div class="get">
		<div class="am-g">
			<div class="am-u-lg-3  am-u-lg-offset-7 am-padding-vertical-sm"
				style="border-style: solid; border-width: medium">
				<ul class="am-nav am-nav-pills am-nav-justify">
					<li><a href="./Login.jsp">用户登录</a></li>
					<li class="am-active"><a href="./Register.jsp">免费注册</a></li>
				</ul>
				<hr>
				<form method="post" action="register.do" class="am-form"
					id="registerformtooltip" data-am-validator>
					<div class="am-form-group">
						<input type="text" name="PhoneNumber" id="PhoneNumber"
							minlength="11" maxlength="11" class="am-form-field"
							placeholder="请使用手机号码注册" pattern="1[0-9]{10}"
							data-foolish-msg="请输入正确的手机号码" required />
					</div>
					<div class="am-g am-form-group">
                            <div  class="am-u-lg-7">
							<input type="text" name="validateCode"
								class="am-form-field" pattern="[0-9]{4}" minlength="4"
								maxlength="4" data-foolish-msg="请输入正确验证码" placeholder="填写验证码"
								required />
						</div>
						<div  class="am-u-lg-5 am-u-end" >
							<Button type="button" id="verification-code" 
									name="verification-code" 
									class="am-radius am-btn-warning am-btn am-btn-block"><span >获取验证码 </span></Button>
</div>
					</div>
					<div class="am-form-group">
						<input type="password" name="Password" id="Password"
							class="am-form-field" placeholder="请设置登陆密码" minlength="6"
							maxlength="20" pattern="[a-z|A-Z|0-9]{6,20}"
							data-foolish-msg="请输入密码数字加字母" required />
					</div>
					<div class="am-form-group">
						<input type="password" name="PasswordRepeat" class="am-form-field"
							data-equal-to="#Password" placeholder="请重复密码"
							data-foolish-msg="请与上面保存一致" required id="rePassword" />
					</div>
					
					<div class="am-form-group">
						<input type="button" name="submit" id="submit" value="立即注册"
							class="am-btn am-btn-primary am-btn-sm am-btn-block">
					</div>
				</form>
			</div>
			  <div id="mc" >
							<canvas id="mc-canvas"></canvas>
							<input type="hidden" id="mc-action" value="javascript:submit()" />
						</div>
		</div>
		  
	</div>
	<script type="text/javascript">
		var $form = $('#registerformtooltip');
		var i = 60;
		function showTime() {
			i = i - 1;
			$('#verification-code').text(i + 's重新发送');
		}
	    var times=0;

		setFormValidate($form);
		$('#submit').click(function(){
			if(times<3)
				submit();
		});
				function submit(){
					var validatecode = $('[name=validateCode]').val();
					var PhoneNumber = $("#PhoneNumber").val();
					var Password = $("#Password").val();
					var rePassword = $("#rePassword").val();
					var regvalidateCode = /[0-9]{4}/;
					var regPhoneNumber = /1[0-9]{10}/;
					var regPassword = /[a-z|A-Z|0-9]{6,20}/;
					if (!regvalidateCode.test(validatecode)
							|| !regPhoneNumber.test(PhoneNumber)
				             ||!regPassword.test(Password)
							||!regPassword.test(rePassword)
							|| rePassword != Password) {
						$form.submit();
						return false;
					} else {
						myAjax(domain + "/register.do", {
							"validateCode" : validatecode,
							"PhoneNumber" : PhoneNumber,
							"Password" : Password
						}, function(data) {
							if (data.state == 'success') {
								 window.location.href = "EmployeeInfo.jsp";
							} else {
								times++;
								myAlert('提示',data.error_description);
								$('[name=validateCode]').focus();
								if(times>=3)
								{
									  if(times==3)
										  $('#mc').prepend('<p>Please draw the shape in the box to submit the form:</p>');
										
									$('#submit').attr('type','submit');
									$('#submit').prop('disabled','disabled');
										$form.motionCaptcha();
										
								}

							}
						});
					}
				}
			

		$('#verification-code').click(
				function() {
					var $btn = $(this)
					var text = $("#PhoneNumber").val();
					var reg = /1[0-9]{10}/;
					var registermessage = getCookie('registermessage');
					if (registermessage == null || registermessage != text) {

						if (reg.test(text)) {
							var int = setInterval(showTime, 1000);
							myAjax(domain + "/getMessage.do", {
								"phoneNum" : text
							}, function(data) {
								if (data.registed == 'true') {
									myAlert('提示','该用户已被注册');
									clearInterval(int);
									i = 60;
									$btn.button('reset');
									times++;
									$("#PhoneNumber").focus();
								
								} else {
									var mins = 5;
									var exp = new Date();
									exp.setTime(exp.getTime() + mins * 1000
											* 60);
									document.cookie = "registermessage=" + text
											+ ";expires=" + exp.toGMTString();
									$btn.button('loading');
									setTimeout(function() {
										clearInterval(int);
										i = 60;
										$btn.button('reset');
									}, 60000);
								}

							});

						} else {
							$("#PhoneNumber").focus();
						}
					} else
						myAlert('提示','请稍后再试!!!');
				}

		);
		
	</script>
		<%@ include file="../commoms/alert.txt"%>
</body>


</html>
